<template>
  <div class="setting-content inside-comment">
    <el-scrollbar height="calc(100vh - 170px)">
      <h2 class="setting-header">
        <strong>报名管理</strong>
      </h2>
      <div class="top-info">
        <SearchCmp v-if="searchCmpArray.length && departTree.value != []" :searchCmpArray="searchCmpArray" :searchForm="queryData"  @onSubmit="getTableData" />
        <div class="right-add">
          <el-button type="primary" @click="addDrawer">添加学员</el-button>
          <el-button type="primary" @click="importStudent">批量导入</el-button>
        </div>
      </div>
      <RuifoxTable
        v-loading="tableLoading"
        :table-data="tableData"
        :field-list="fieldList"
        :default-index="true"
        :default-checkbox="false"
        :lazy="true"
      >
        <!-- <template #default-checkbox="{ element }">
          <div class="table-div-check">
            <el-checkbox
              class="unmover"
              v-model="element.checked"
              @change="handleCheckTable(element.id)"
              size=""
            />
          </div>
        </template> -->
        <!-- 学员姓名  -->
        <template #name="{ element }"> 
          <div>{{element.renderData.userInfo.name}}</div>
        </template>

        <template #options="{ element }">
          <div class="table-td-option unmover">
            <el-button
              type="primary"
              link
              @click="showDrawer(element)"
            >
              预览
            </el-button>
            <el-button
              type="primary"
              link
              @click="remove(element)"
            >
              删除
            </el-button>
          </div>
        </template>
      
      </RuifoxTable>
      <PaginationView
        :isAffix = "false"
        :total="queryData.total"
        :pageSize="queryData.pageSize"
        :currentPage="queryData.currentPage"
        :allChoose="isAllChooseBtn"
        :pageChoose="isPageChooseBtn"
        :options="batchOptions"
        :checkedNum="checkedNum"
        :canChoose="queryData.total > 0"
        @changeSize="handleSizeChange"
        @currentChange="handleCurrentChange"
        @changePageChoose="handlePageChoose"
        @changeAllChoose="handleAllChoose"
        @invertChoose="handleInvertChoose"
        @checkOption="handleBatchOptions"
        @refreshList="getTableData"
        @cancelChoose="handleResetPagination"
        v-if="tableData.length > 0"
      />
    </el-scrollbar>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { recordPagingEnrollment } from '@/api/enrollment';
import { tableList as mixTable } from '@ruifox-cms/utils'

const {
  queryData,
  tableData,
  tableLoading,
  checkedNum,
  isAllChooseBtn,
  isPageChooseBtn,
  // checkedList,
  // isAllSearch,
  getTableData,
  // handleSearch,
  handleCurrentChange,
  handleSizeChange,
  handlePageChoose,
  handleAllChoose,
  handleInvertChoose,
  // handleCheckTable,
  handleResetPagination,
} = mixTable({
  getListApi: recordPagingEnrollment,
});
const defaultQuery = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0,
  sort: "",
  order: "",
  applicationIds: [],
  applicantIds: [],
  status: "",
  processInstanceId: []
});

Object.assign(queryData, defaultQuery);

//表格展示字段
const fieldList = ref([
  {
    title: "证书名称",
    name: "certName",
  },
  {
    title: "学员姓名",
    name: "name",
  },
  {
    title: "获得时间",
    name: "createdAt",
  },
  {
    title: "操作",
    name: "options",
    width: 150,
  },
]);

onMounted(() => { 
  getTableData();
});
</script>
<style scoped lang="scss">

</style>